<!DOCTYPE html>
<html>

<head>
<#include "/zf/admin/components/meta.html" />
<title>蓁奕科技 ${metaTitleSuffix!}</title>
<#include "/zf/admin/components/stylesheets.html" />
<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.pw-strength-wrap {
	display: flex;
	align-items: center;
}

.pw-strength-box {
	margin-left: 10px;
	height: 10px;
	width: 150px;
	border: 1px solid #ccc;
	padding: 2px;
}
</style>
</head>

<body>
	<div id='app'>
		<el-container> <#assign menuIndex="4-1" /> <#include "/zf/admin/components/menu.html" />
		<el-container> <#include "/zf/admin/components/header.html" />
		<el-main> <template> <el-form ref="form"
			:model="form" label-width="80px"> <el-row> <el-form-item
			label="登陆名"> <el-input v-model="form.username"></el-input>
		</el-form-item> <el-form-item label="密码"> <el-input
			v-model="form.password" @input="checkPwStrength"></el-input>
		<div class="pw-strength-wrap">
			<span>密码强度</span>
			<div class="pw-strength-box">
				<div v-bind:style="pwStrengthStyle"></div>
			</div>
		</div>
		</el-form-item> <el-form-item> <el-button type="primary"
			@click="onSubmit" :disabled="form.role == 0">保存</el-button> </el-form-item> </el-row> </el-form> </template> </el-main> </el-container> </el-container>
		<#include "/zf/admin/components/footer.html" />
	</div>
	<#include "/zf/admin/components/scripts.html" />
	<#include "/components/qiniu.html" />
	<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                form: ${data!'{}'},
                pwStrength: 0,
                pwStrengthStyle: {
                    background: '',
                    height: '10px',
                    width: '0'
                }
            }
        },
        watch: {
            pwStrength: function(val) {
                if (val == 0) {
                    this.pwStrengthStyle.background = '';
                    this.pwStrengthStyle.width = '0';
                } else if (val == 1) {
                    this.pwStrengthStyle.background = 'red';
                    this.pwStrengthStyle.width = '50px';
                } else if (val == 2) {
                    this.pwStrengthStyle.background = 'orange';
                    this.pwStrengthStyle.width = '100px';
                } else if (val == 3) {
                    this.pwStrengthStyle.background = 'green';
                    this.pwStrengthStyle.width = '150px';
                }
            }
        },
        mounted: function() {
            if (this.form.password) {
                this.checkPwStrength(this.form.password);
            }
        },
        methods: {
            onSubmit() {
                if (!this.form.username) {
                    msg("请输入登录名");
                    return;
                }
                 if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.form.username))){ 
                  msg("登录名为手机号码，请重填");  
                    return false; 
                    } 
                if (!this.form.password) {
                    msg("请输入密码");
                    return;
                }
              
                if (!(/^(\w){5,20}$/.test(this.form.password)) ){
                    msg("不出现特殊字符");
                    return;
                }
                var param = {
                 //   id: this.form.id,
                    username: this.form.username,               
                    password: this.form.password,            
                }
              
                var url = '/zf/admin/auth/submit'
                axiosRequest(param, url, '/zf/admin/auth/list')
            },
            checkPwStrength(val) {
                var lvl = 0;
                if (/[0-9]/.test(val)) {
                    lvl++;
                }
                if (/[a-zA-Z]/.test(val)) {
                    lvl++;
                }
                if (/[^0-9a-zA-Z_]/.test(val)) {
                    lvl++;
                }
                this.pwStrength = lvl;
            }
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
	<script>
    </script>
</body>

</html>